<style>
.add_prodct{
    padding: 20px;
    float: left;
}
</style>
<template>
  <div>
    <div class="add_prodct">
      <el-button @click="addCommodity" type="primary">新增用户</el-button>
    </div>
    <div>
      <el-table :data="productList" border style="width: 100%">
        <el-table-column prop="id" label="编号" width="150"></el-table-column>
        <el-table-column prop="pName" label="商品名称" width="120"></el-table-column>
        <el-table-column prop="Ptype" label="商品类型" width="120"></el-table-column>
        <el-table-column prop="price" label="商品价格" width="120"></el-table-column>
        <el-table-column prop="sum" label="商品总数" width="120"></el-table-column>
        <el-table-column prop="number" label="剩余数量" width="120"></el-table-column>
        <el-table-column prop="img" label="图片" width="300">
          <template slot-scope="scope">
            <img :src="scope.row.img" min-width="70" height="70" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="deleCommodity(scope.row)" type="text" size="small">删除</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      productList: []
    };
  },
  created() {
    this.getproductlist().then(() => {
      this.productList = this.productlist;
    });
  },
  computed: {
    ...mapState({
      productlist: state => state.productList
    })
  },
  methods: {
    ...mapActions({
      getproductlist: "GET_PRODUCTLIST"
    }),
    addCommodity() {}
  }
};
</script>